<template>
  <div>
    <div class="body-box">
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane name="0">
          <span slot="label">基本信息</span>
          <user-base :member_id="member_id" v-if="member_id"></user-base>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label">
            参加活动
            <span class="tab-badge">{{active_num}}</span>
          </span>
          <user-active :member_id="member_id" v-if="member_id"></user-active>
        </el-tab-pane>
      </el-tabs> -->
      <window-title title="基本信息"></window-title>
      <el-card shadow="never" class="user-base">
        <div class="user-base-item">
          <div class="user-base-label">昵称：</div>
          <div class="user-base-content">{{user_info.MemberName}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">ID：</div>
          <div class="user-base-content">{{user_info.IdCode}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">姓名：</div>
          <div class="user-base-content">{{sign_info.name}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">手机号：</div>
          <div class="user-base-content">{{sign_info.mobile}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">血型：</div>
          <div class="user-base-content">{{sign_info.blood}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">城市：</div>
          <div class="user-base-content">{{sign_info.city}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">邮箱：</div>
          <div class="user-base-content">{{sign_info.email}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">性别：</div>
          <div class="user-base-content">{{sign_info.sex}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">证件类型：</div>
          <div class="user-base-content">{{sign_info.card_type}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">证件号码：</div>
          <div class="user-base-content">{{sign_info.card_no}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">生日：</div>
          <div class="user-base-content">{{sign_info.birth}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">跑龄：</div>
          <div class="user-base-content">{{sign_info.run_age}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">鞋子尺码：</div>
          <div class="user-base-content">{{sign_info.shoes_size}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">衣服尺码：</div>
          <div class="user-base-content">{{sign_info.dress_size}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">紧急联系人：</div>
          <div class="user-base-content">{{sign_info.contact_person}}</div>
        </div>
        <div class="user-base-item">
          <div class="user-base-label">紧急联系方式：</div>
          <div class="user-base-content">{{sign_info.contact_mobile}}</div>
        </div>
        <div style="width:100%;height:0px;clear:both"></div>
      </el-card>
      <window-title title="参与活动"></window-title>
      <div style="margin-top:10px;">
        <ac-list :handle="false" :list="list.data"></ac-list>
        <div class="empty-list" v-if="no_list">暂无参加过本团活动</div>
        <div class="page-box" v-if="!no_list">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import windowTitle from '../../components/unit/title.vue';
import acList from '../active/list-table.vue';

export default {
  components: { windowTitle , acList},
  data() {
    return {
      query: {},
      activeName: "0",
      member_id: "",
      active_num : 0,
      user_info : {},
      sign_info : {},
      list : {
        current_page : 1,
        data : []
      },
      no_list : false,
    };
  },
  mounted() {
    this.query = this.$route.query;
    this.member_id = this.$route.params.id;
    this.getUserInfo();
    this.getActive();
  },
  methods: {
    //分页
    changePage(e){
      this.list.current_page =e ;
      this.getActive();
    },
    //获取会员信息
    getUserInfo(){
      this.ajaxs('user/getUserSignInfo',{
        data : {member_id : this.member_id},
        success:(res) => {
          this.user_info = res.msg.user_info;
          this.sign_info = res.msg.sign_info;
        }
      });
    },
    //获取参与的活动信息
    getActive(){
      this.ajaxs('user/getUserActive',{
        data :{page : this.list.current_page , member_id : this.member_id},
        success:(res) => {
          this.list = res.msg;
          if(this.list.data.length == 0)this.no_list = true;
          console.log(res);
        }
      });
    },
    //获取加载数据
    // getData(){
    //   this.ajaxs('user/getUserActiveNum',{
    //     data: {member_id : this.member_id},
    //     success:(res) =>{
    //       this.active_num = res.msg.active_num;
    //     }
    //   });
    // },
    //返回上一页
    backUp() {
      this.$router.push({
        path: "/manage/user/list",
        query: this.query
      });
    }
  }
};
</script>

<style>
.user-base{overflow: hidden;margin-top:20px;margin-bottom: 10px;}
.user-base-item{width: 50%;float: left;height: 30px;line-height: 30px}
.user-base-label,.user-base-content{float: left;}
.user-base-label{width: 100px;color: #999;}
.user-base-content{width: calc(100% - 100px);}
.empty-list{color:#aaa;text-align: center;height: 50px;line-height: 40px;border-bottom: 1px solid #e1e1e1;}
</style>